<template>
  <page-header-wrapper :title="false">
    <a-card title="问题录音">
      <a-tabs @change="onTabs">
        <a-tab-pane key="2" tab="APP拨号"></a-tab-pane>
        <a-tab-pane key="1" tab="软件拨号"></a-tab-pane>
      </a-tabs>
      <s-table
        bordered
        ref="table"
        :row-key="(record) => record.id"
        :columns="questionColumns"
        :data="questionData"
      >
        <template slot="is_read" slot-scope="text">
          <a-tag v-if="text == 0" color="red">顾问未读</a-tag>
          <a-tag v-if="text == 1">顾问已读</a-tag>
        </template>
        <div
          slot="filterDropdown"
          slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
          style="padding: 8px"
        >
          <a-input
            v-ant-ref="c => (searchInput = c)"
            :placeholder="`搜索${column.title}`"
            :value="selectedKeys[0]"
            style="width: 188px; margin-bottom: 8px; display: block;"
            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
            @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
          />
          <a-button
            type="primary"
            icon="search"
            size="small"
            style="width: 90px; margin-right: 8px"
            @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
          >
            搜索
          </a-button>
          <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
            重置
          </a-button>
        </div>
        <div
          slot="filterSelect"
          slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
          style="padding: 8px"
        >
          <a-select
            show-search
            style="width: 188px; margin-bottom: 8px; display: block;"
            :placeholder="`选择${column.title}`"
            :value="selectedKeys[0]"
            :filter-option="filterOption"
            @change="(value) => setSelectedKeys(value ? [value] : [])"
            @pressEnter="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
          >
            <a-select-option v-for="(item,index) in adviserOpts" :key="item" :value="item">{{index}}</a-select-option>
          </a-select>
          <a-button
            type="primary"
            icon="search"
            size="small"
            style="width: 90px; margin-right: 8px"
            @click="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
          >
            搜索
          </a-button>
          <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
            重置
          </a-button>
        </div>
        <template slot="url" slot-scope="text,record">
          <audio v-if="record.duration != 0" :src="text" controls :style="{ height: '20px', lineHeight: '20px' }">
            您的浏览器不支持 audio 标签
          </audio>
          <div v-else>-</div>
        </template>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { getQuestionList } from '@/api/calls'
import col from '@/columns/calls'

export default {
  components: {
    STable
  },
  name: 'QuestionCall',
  data () {
    return {
      questionColumns: col.question,
      questionData: parameters => {
        return getQuestionList(Object.assign(parameters, this.queryParam)).then(res => {
          this.kaola_account = res.result.kaola_account
          this.nanfang_account = res.result.nanfang_account
          this.adviserOpts = res.result.nanfang_account
          return res.result
        })
      },
      queryParam: {},
      kaola_account: {},
      nanfang_account: {},
      adviserOpts: {}
    }
  },
  created () {
    this.queryParam['filter[type]'] = '2'
  },
  methods: {
    onTabs (key) {
      if (key === 1) {
        this.adviserOpts = this.kaola_account
      } else {
        this.adviserOpts = this.nanfang_account
      }
      this.queryParam['filter[type]'] = key
      this.$refs.table.refresh(true)
    },
    handleSearch (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
      this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
    },
    handleReset (clearFilters, dataIndex) {
      clearFilters()
      delete this.queryParam['filter[' + dataIndex + ']']
    },
    handleSelect (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
      this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    }
  }
}
</script>

<style>
.ant-table-tbody > tr.table-color-dust {
  background-color: #ffcccc;
}
</style>
